<template>
  <div class="attrs1">
    <h1>这里是最大的组件(父组件)</h1>
    <attrs2
      :a="a"
      :b="b"
      :c="c"
      :d="d"
      v-bind="{ x: 100, y: 200 }"
      :updateA="updateA"
    ></attrs2>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import attrs2 from "./attrs2.vue";
let a = ref(1);
let b = ref(2);
let c = ref(3);
let d = ref(4);

function updateA(value) {
  a.value = value;
}
</script>
<style scoped>
.attrs1 {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>
